import { GetRightsFnc } from '@/services/rights';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Tag } from 'antd';
import { useState } from 'react';

const Rights = () => {
  const [pageSize, setPageSize] = useState(2); // table 每页显示的条数
  const getData = async () => {
    const res = await GetRightsFnc();
    return {
      data: res.data,
      success: res.meta.status === 200,
      total: res.data.total,
    };
  };

  const levelTag = (level: string) => {
    if (level === '0') {
      return <Tag color="blue">一级</Tag>;
    } else if (level === '1') {
      return <Tag color="green">二级</Tag>;
    } else {
      return <Tag color="orange">三级</Tag>;
    }
  };

  const columns: any = [
    {
      title: '权限名称',
      dataIndex: 'authName',
      key: 'authName',
      width: 130,
      ellipsis: true,
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
      width: 120,
      ellipsis: true,
    },
    {
      title: '权限等级',
      dataIndex: 'level',
      width: 80,
      key: 'level',
      render: (_: number, record: { level: string }) => levelTag(record.level),
    },
  ];
  return (
    <>
      <PageContainer
        header={{
          title: '',
          breadcrumb: { items: [{ title: '权限管理' }, { title: '权限列表' }] },
        }}
      >
        <ProTable
          columns={columns}
          rowKey={(record) => record.id}
          request={async () => getData()}
          scroll={{ x: 500 }}
          bordered
          search={false}
          pagination={{
            pageSize: pageSize,
            showSizeChanger: true,
            pageSizeOptions: [2, 5, 10],
            onShowSizeChange: (_, size) => setPageSize(size),
          }}
        />
      </PageContainer>
    </>
  );
};

export default Rights;
